<template>
  <div class="home" v-if="tabs.length">
    <!-- 搜索开始 -->
     <div class="search">
      <a href=""><img src="../assets/logo.png" width="26"></a>
      <input type="text" placeholder="请输入关键字">
      <a href="">
        <img :src="$store.state.user.userInfo.avatar" width="28" 
        v-if="$store.state.user.userInfo.avatar">
        <img v-else src="../assets/user.png" width="28"></a>
     </div>
    <!-- 搜索结束 -->
    <!-- tabs开始 --> 
    <div class="tabs">
        <div class="up">
          <div 
          class="item" :class="{'active':current==index}" 
          v-for="(item,index) in tabs"
          @click="current=index" 
          :key="item.page_id">
          {{item.name }}</div>
        </div>
    </div>
    <!-- 分类信息 -->
    <PageCom 
    v-show="index===current"
    :item="item"
    v-for="(item,index) in tabs" :key="item.page_id"></PageCom>
  </div>
  <HomeSkeleton v-else></HomeSkeleton>
</template>
<script>
import {GetHomePage} from '@/api/mi.js'
import PageCom from '@/components/PageCom.vue'
import HomeSkeleton from '@/components/HomeSkeleton.vue'
export default {
    components:{PageCom, HomeSkeleton},
    data(){
      return {
        tabs:[],//分类导航数据
        current:0,//高亮的元素
      }
    },
    created(){
      // 请求首页的数据
      GetHomePage()
      .then(res=>{
        console.log(res.data)
        // 更新tabs
        this.tabs = res.data.data.tabs;
        
      })
      .catch(err=>{
        console.log(err,"错误")
      })
    }
}
</script>
<style lang="scss" scoped>
  .tabs{
    height: .88rem;
    line-height: .88rem;
    background-color: #f0f0f0;
    .up{
      white-space: nowrap;
      .item{ 
        display: inline-block;
        font-size: .24rem;
        padding: 0 .3rem;
        color:#484848;
      }
      .item.active{color:#f70}
      
    }
  }
  .search{
    display:flex;
    height:.88rem;
    align-items:center;
    background-color: #f0f0f0;
    input{
      flex:1; 
      height: .5rem;
      border:none;
      padding: 0 .15rem
    }
    a{
      display: inline-block;
      width: 0.88rem;
      line-height: .88rem;
      text-align: center;
      img{ vertical-align: middle;}
    }
  }
  .home{ overflow: auto;}
</style> 